import {Popconfirm, Space, Menu, Dropdown} from 'antd';
import React from 'react';
import type {ProColumns} from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import {DownOutlined} from '@ant-design/icons';
import { PageContainer } from '@ant-design/pro-layout';

export type Member = {
  avatar: string;
  realName: string;
  nickName: string;
  email: string;
  outUserNo: string;
  phone: string;
  role: RoleType;
  permission?: string[];
};

export type RoleMapType = Record<string,
  {
    name: string;
    desc: string;
  }>;

export type RoleType = 'admin' | 'operator';

const RoleMap: RoleMapType = {
  admin: {
    name: '管理员',
    desc: '仅拥有指定项目的权限',
  },
  operator: {
    name: '操作员',
    desc: '拥有所有权限',
  },
};

const tableListDataSource: Member[] = [];

const realNames = ['新增的', '删除的'];
const nickNames = ['巴巴', '测试', '测试2', '测试3'];
const emails = ['baba@antfin.com', 'test@antfin.com', 'test2@antfin.com', 'test3@antfin.com'];
const phones = ['12345678910', '10923456789', '109654446789', '109223346789'];
const permissions = [[], ['权限点名称1', '权限点名称4'], ['权限点名称1'], []];

for (let i = 0; i < 5; i += 1) {
  tableListDataSource.push({
    outUserNo: `${102047 + i}`,
    avatar: 'https://gw.alipayobjects.com/zos/antfincdn/upvrAjAPQX/Logo_Tech%252520UI.svg',
    role: i === 0 ? 'admin' : 'operator',
    realName: realNames[i % 2],
    nickName: nickNames[i % 4],
    email: emails[i % 4],
    phone: phones[i % 4],
    permission: permissions[i % 4],
  });
}

const roleMenu = (
  <Menu>
    <Menu.Item key="admin">管理员</Menu.Item>
    <Menu.Item key="operator">操作员</Menu.Item>
  </Menu>
);

const FileVerification: React.FC = () => {
  const renderRemoveUser = (text: string) => (
    <Popconfirm key="popconfirm" title={`确认${text}吗?`} okText="是" cancelText="否">
      <a>{text}</a>
    </Popconfirm>
  );

  const columns: ProColumns<Member>[] = [
    {
      dataIndex: 'realName',
      title: '类型',
      align:'center',
    },
    {
      dataIndex: 'email',
      title: '文件地址',
      align:'center',
    },
    {
      dataIndex: 'phone',
      title: '校验码',
      align:'center',
    },
    {
      dataIndex: 'phone',
      title: '上次访问时间',
      align:'center',
    },
    {
      dataIndex: 'phone',
      title: '上次修改时间',
      align:'center',
    },
    {
      dataIndex: 'phone',
      title: '上次改变时间',
      align:'center',
    },

  ];


  return (
    <PageContainer
      header={{
        title: '文件校验',
        breadcrumb: {},
      }}
    >
      <ProTable<Member>
        columns={columns}
        request={(params, sorter, filter) => {
          // 表单搜索项会从 params 传入，传递给后端接口。
          console.log(params, sorter, filter);
          return Promise.resolve({
            data: tableListDataSource,
            success: true,
          });
        }}
        rowKey="outUserNo"
        pagination={{
          showQuickJumper: true,
        }}
        toolBarRender={false}
        search={false}
      />
    </PageContainer>
  );
}

export default FileVerification;
